<template>
    <editor v-model="content" :init="config"></editor>
</template>

<script>
    import axios from 'axios'
    import Editor from 'editor'
    const config = require('$project').axios
    export default {
        name: "editor-demo",
        data() {
            return {
				config: {
                    language: 'zh_CN',
                    plugins: 'autolink link image imagetools paste textcolor lists charmap print insertdatetime media emoticons table toc preview topic lineheight',
                    toolbar: 'undo redo | bold italic lists | paste pastetext | fontsizeselect lineheightselect | indent outdent | alignleft aligncenter alignright alignjustify | image removeformat | link unlink | forecolor | table | preview topic code',
                    // 字体
                    fontsize_formats: '12px 14px 16px 18px 20px 22px',
                    // 行高
                    lineheight_formats: "10px 12px 14px 16px 18px 20px 22px 24px 26px 30px",
                    image_description: false,
                    paste_use_dialog : true,
                    paste_as_text: true,
                    paste_data_images: true,
                    paste_auto_cleanup_on_paste : true,
                    paste_convert_middot_lists : false,
                    // 选中图片点击编辑按钮触发
                    editkatex: (latex)=> {
                        this.$formula({
                            exper: latex,
                            onInsert: (url,expr)=> {
                                tinymce.activeEditor.insertContent(`<img src="${url}" data-latex="${expr}">`);
                            }
                        })
                    },
                    toFormula: ()=> {
                        this.$formula({
                            exper: '',
                            onInsert: (url,expr)=> {
                                tinymce.activeEditor.insertContent(`<img src="${url}" data-latex="${expr}">`);
                            }
                        })
                    },
                    toFiles: ()=> {
                        this.$files((data) => {
                            data.forEach(item => {
                                if (item.type == 'image') {
                                    tinymce.activeEditor.insertContent(`<span style="padding:10px"><img src="${item.src}"/></span>`)
                                }
                                if (item.type == 'video') {
                                    tinymce.activeEditor.insertContent(
                                    `<span style="padding:10px"><video controls="controls" width="350" height="180"><source src="${item.src}" /></video></span>`)
                                }
                            });
                        })
                    },
                    // 选中图片出现选项
                    imagetools_toolbar: "rotateleft rotateright imageoptions",
                    // 上传路径
                    images_upload_url: config.baseUrl+'api/user/v1/new/editor/upload',
                    
                    // images_upload_base_path: 'http://localhost:9400/static',
                    // 自动上传图片
                    automatic_uploads: true,
                    images_dataimg_filter: function(img) {
                        return !img.hasAttribute('data-latex');
                    },
                    images_reuse_filename: true,
                    height: this.height,
                    // 隐藏bar栏
					statusbar: false,
					skin: 'custom',
                    menubar: false,
                    // 是否行内
                    inline: this.inline?true:false
				}
            }
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            inline: {
                type: Boolean,
                default: false
            },
            module: {
                type: String,
                default: ''
            },
            height: {
                type: Number,
                default: 300
            }
        },
        methods: {
            
        },
        computed: {
            content: {
                get() {
                    return this.value
                },
                set(val) {
                    this.$emit('input',val)
                }
            }
        },
        components: { Editor },
    }
</script>
